<!--
  * @Author: 陈菲
  * @Description: 项目附件上传
 -->
<template>
  <div class="file_attachment">
    <ElUpload
      ref="uploadVid"
      action="#"
      :file-list="uploadTxt"
      :on-change="handleChangeTxt"
      :multiple="false"
      :accept="accept"
      :limit="limit"
      :before-upload="beforeUpload"
      :http-request="handleRequestDD"
      :before-remove="beforeRemove"
      :on-exceed="handleExceedFile"
    >
      <ElButton class="upload_btn">
        <ElIcon :size="20"><Paperclip /></ElIcon
      ></ElButton>
      <slot>
        <div class="el-upload__tip">({{ desc }})</div>
      </slot>
    </ElUpload>
  </div>
</template>

<script setup>
import { onMounted, ref, toRefs } from 'vue';
import { Paperclip } from '@element-plus/icons-vue';
import { ElMessage, ElUpload, ElButton, ElIcon } from 'element-plus';
import { UPLOAD_FILE_SIZE_DOCUMENT } from '../common/common-helper';

const props = defineProps({
  limit: {
    type: Number,
    default: 9,
  },
  accept: {
    type: String,
  },
  desc: {
    type: String,
  },
  fileList: {
    type: Array,
  },
});

const { limit, accept, desc, fileList } = toRefs(props);
const emit = defineEmits(['getFileList', 'getFilesListRemove']);

const uploadTxt = ref([]);
const attachment = ref([]);

const UPLOAD_FILE_TYPE_DOCUMENT = (file) => {
  if (
    [
      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
      'application/pdf',
      'application/msword',
      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
      'application/vnd.ms-excel',
    ].includes(file.type) &&
    ['doc', 'docx', 'pdf', 'xls', 'xlsx'].includes(file.name.substring(file.name.lastIndexOf('.') + 1))
  )
    return true;

  return false;
};

const beforeUpload = (file) => {
  const isAPK = UPLOAD_FILE_TYPE_DOCUMENT(file);

  if (!isAPK) {
    // 类型不匹配
    ElMessage({
      message: '不支持该格式的文件，请按要求上传!',
      type: 'warning',
    });

    return isAPK;
  }

  const isLt50M = UPLOAD_FILE_SIZE_DOCUMENT(file);

  if (!isLt50M) {
    ElMessage({
      message: `上传文件大小不能超过50MB!`,
      type: 'warning',
    });

    return isLt50M;
  }
};

const handleRequestDD = () => {
  const prom = new Promise(() => {});

  prom.abort = () => {};

  return prom;
};

const handleExceedFile = (files, fileList) => {
  ElMessage({
    message: `当前限制选择 ${props.limit} 个文件，已经选择了 ${fileList.length} 个文件`,
    type: 'warning',
  });
};

const handleChangeTxt = (uploadFile, uploadFiles) => {
  attachment.value = uploadFiles;
  uploadTxt.value = uploadFiles;
  emit('getFileList', uploadFile);
};

const beforeRemove = (uploadFile, uploadFiles) => {
  attachment.value = uploadFiles;
  emit('getFilesListRemove', uploadFile);
};

onMounted(() => {
  // 判断是否有默认图片

  if (fileList.value.length) {
    const newFileList = fileList.value.map((item) => {
      return {
        name: item.title ?? item.name,
        url: item.address ?? item.url,
        size: item.size,
      };
    });

    uploadTxt.value = newFileList;
  }
});
</script>

<style lang="scss" scoped>
.file_attachment {
  width: 350px;
  text-align: left;
  .upload_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #d5d7e3;
    background-color: #fff;
    border: 1px solid #d5d7e3;
    border-radius: 5px;
  }
  :deep(.el-upload--picture-card) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    line-height: 40px;
    background-color: #fff;
    border: 1px solid #d4d6e2;
    border-radius: 4px;
  }

  :deep(.el-upload-list--picture-card .el-upload-list__item) {
    width: 40px;
    height: 40px;
  }
}
.el-icon-picture-outline {
  color: #999999;
  font-size: 17px;
}
.el-upload__tip {
  color: #cccccc;
  font-size: 16px;
}
</style>
